<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 缩放变形：transform:scale() */
        /* 写法：transform:scale(3)  注意数值无单位，表示倍数  大于1放大，小于1缩小 */
        /* 缩放原点默认在中心 */
        /* 变形后的位置仍然是占有自己原来的位置。但是影子会变大，可能会压到别人。 */
        img{border: 1px solid #000;}
        img.p1{
            /* 放大两倍，位置还是原来的位置，但是影子会影响到别人 */
            transform:scale(2)
        }
        img.p3{
            transform:scale(0.66)
        }
        img.p4{
            transform:scale(1)
        }
        img.p4:hover{
            transform:scale(1.3)
        }
    </style>
</head>
<body>
    <p><img src="2.png" alt="" class="p1"></p>
    <p><img src="2.png" alt="" class="p2"></p>
    <p><img src="2.png" alt="" class="p3"></p>
    <p><img src="2.png" alt="" class="p4"></p>
</body>
</html>